<template>
  <div class="appointmentSweepGrave h100" v-loading="loading">
    <div class="pageContent">
      <el-row :gutter="11" class="fileSearch">
        <el-form
        class="form"
          :model="ruleForm"
          :inline="true"
          ref="ruleForm"
          label-width="80px"
        >
          <el-form-item label="业务编码:" prop="appointmentCode">
            <el-input v-model="ruleForm.appointmentCode" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="appointmentPhone">
            <el-input v-model="ruleForm.appointmentPhone" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份证号:" prop="appointmentCardNo">
            <el-input v-model="ruleForm.appointmentCardNo" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="onSubmit(1)"
            >
              查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
      <div class="table_wrapper">
        <el-table
        :data="tableData"
        border
        :header-cell-style="{
          background: 'rgb(246,247,251)',
          color: '#606266'
        }"
        stripe
        class="defaultTableHeight"
      >
        <el-table-column type="index" label="编号" width="50">
        </el-table-column>
        <el-table-column prop="appointmentCode" align="center" label="业务编码">
        </el-table-column>
        <el-table-column prop="appointmentName" align="center" label="用户姓名">
        </el-table-column>
        <el-table-column prop="appointmentPhone" align="center" label="手机号">
        </el-table-column>
        <el-table-column
          prop="appointmentCardNo"
          align="center"
          label="身份证号"
        >
        </el-table-column>
        <el-table-column prop="attendNum" align="center" label="随从人数">
          <template slot-scope="scope">
            随从人数为 {{ scope.row.attendNum }}人
            <el-button
              v-if="scope.row.attendNum > 0"
              type="success"
              size="mini"
              @click="getInfo(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="cemeteryName" align="center" label="公墓名称">
        </el-table-column>
        <el-table-column prop="graveDetail" align="center" label="墓穴具体位置">
        </el-table-column> -->
        <el-table-column align="center" label="预约时间">
          <template slot-scope="scope">
            {{ scope.row.apointmentSegment }}
            <!-- | timestampToTime  -->
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currentPage"
          :page-size="pager.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          background
          layout="total,sizes,prev, pager, next, jumper"
          :total="pager.total"
        >
        </el-pagination>
      </p>
      </div>
      
      
    </div>

    <el-dialog
      title="随从人员信息"
      :visible.sync="dialogVisible"
      width="600px"
      v-dialogDrag
      @close="closeDialog"
    >
      <div class="maxH">
        <!-- <el-form
          ref="goodsForm"
          :model="goodsForm"
          label-width="80px"
          :inline="true"
        > -->
        <!-- size="mini" -->
        <div v-for="(item, index) in goodsForm" :key="index">
          <el-divider>第{{ index + 1 }}位随行人信息</el-divider>
          <div class="box_info"><span>姓名</span>{{ item.friendName }}</div>
          <div class="box_info"><span>手机号</span>{{ item.friendPhone }}</div>
          <div class="box_info w300">
            <span>身份证号</span>{{ item.friendCard }}
          </div>
        </div>
        <!-- 
        <el-form-item>
          <el-button type="primary" @click="saveGoods">保存</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item> -->
        <!-- </el-form> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAppointmentSweepGraveList,
  make_graveDetail
} from "@/api/appUser/appointmentSweepGrave";
export default {
  name: "appointmentSweepGrave",
  data() {
    return {
      loading: false,
      dialogVisible: false,
      ruleForm: {
        appointmentCode: "",
        appointmentPhone: "",
        appointmentCardNo: ""
      },
      pager: {
        pageSize: 20,
        total: 1,
        currentPage: 1
      },
      tableData: [],
      goodsForm: []
    };
  },
  mounted() {
    this.onSubmit();
  },
  destroyed() {},
  methods: {
    async getInfo({ attendNum, id }) {
      if (attendNum <= 0) {
        this.$message("没有随从人员信息");
        return;
      }
      let postData = { userAppointmentInfoId: id };
      console.log(postData, "postData");
      try {
        const res = await make_graveDetail(postData);
        console.log(res, 200);
        if (res.code === "2000") {
          this.goodsForm = res.data.graveFriendResList;
          this.dialogVisible = true;
          return;
        }
        this.$message.fail(res.msg || "数据获取失败");
      } catch (err) {
        console.log(err, 404);
        this.$message.fail(err.msg);
      }
    },
    async onSubmit(val) {
      if (val) {
        this.pager.currentPage = 1;
      }
      this.loading = true;
      let postData = {
        // appointmentCode: this.ruleForm.appointmentCode,
        // appointmentPhone: this.ruleForm.appointmentPhone,
        // appointmentCardNo: this.ruleForm.appointmentCardNo,
        ...this.ruleForm,
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage
      };
      try {
        //查询接口
        const res = await getAppointmentSweepGraveList(postData);
        console.log(res, 200);
        this.loading = false;
        if (res.code != 2000) {
          this.$message.error(res.msg ? res.msg : "数据读取失败");
          return;
        }
        this.tableData = res.data;
        this.pager.pageSize = res.pageSize;
        this.pager.total = res.total;
        this.pager.currentPage = res.currentPage;
      } catch (err) {
        this.loading = false;
        console.log(err);
        this.$message.error(err.msg);
      }
    },
    // 关闭弹窗的回调
    closeDialog() {
      this.$refs["goodsForm"].resetFields();
      this.dialogVisible = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs["ruleForm"].resetFields();
      this.onSubmit();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pager.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange: function(currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit(); //点击第几页
    }
  }
};
</script>

<style lang="scss" scoped>
.pageContent{
  .form{
    height: 100%;
  }
}
.maxH {
  max-height: 520px;
  // height: 600px;
  // overflow: auto;
  .box_info {
    display: inline-block;
    width: 270px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 10px;
    span {
      display: inline-block;
      width: 80px;
    }
  }
  .w300 {
    width: 300px;
  }
}
</style>
